Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8] Reporter
	Description • 11 years ago

So we show them in the side bar when you select the element they are attached to, but it would be awesome if they were also in the tree view.

	Rob Campbell [:rc] (:robcee)
	Comment 1 • 11 years ago

How would that look? We'd need someway to split out the pseudo-element's content from the rest of the tagged content. Maybe wrap them in a <:pseudo>content</:pseudo> fake tag? Not sure I like that is it's showing people something that doesn't have actual markup for.

	Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8] Reporter
	Comment 2 • 11 years ago

Here is what it looks like in Chrome Canary.

	Heather Arthur [:harth]
	Comment 3 • 11 years ago

I think we could just show "::before" in a different color, maybe a grey. We could show ::before, ::first-letter, and ::first-line before any children, and ::after after any.

	Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8] Reporter
	Comment 4 • 10 years ago

See also bug 920142

	Brian Grinstead [:bgrins] Assignee
	Comment 5 • 10 years ago

As pointed out in Bug 958216, this is probably the best way of handling Computed Styles / Fonts / Box Model information about pseudo elements.  After this, we could probably also move the UI for pseudo elements in the rule view to the bottom of the rules (instead of the top).

	Brian Grinstead [:bgrins] Assignee
	Comment 7 • 10 years ago

I think once a deep tree walker is used from bug 777674 this should be generally supported in the markup view.  Not sure how much more work it will be to support the style inspector panels.

	Dave Camp (:dcamp)
	Comment 8 • 10 years ago

I didn't expect the deep tree walker to support pseudo-elements, am I missing something?

	Brian Grinstead [:bgrins] Assignee
	Comment 9 • 10 years ago

(In reply to Dave Camp (:dcamp) from comment #8)
> I didn't expect the deep tree walker to support pseudo-elements, am I
> missing something?

I'm not 100% sure about it, but DOM Inspector shows :before and :after in the tree and I couldn't find anything in its code that deals with them specifically.  So I'm assuming the deeptreewalker is listing them: https://hg.mozilla.org/dom-inspector/file/444b590ba011/resources/content/viewers/dom/dom.js#l1397.

	Dave Camp (:dcamp)
	Comment 10 • 10 years ago

bgrins confirmed on irc that the patches in bug 777674 add pseudo-elements to the markup view.

	Brian Grinstead [:bgrins] Assignee
	Comment 11 • 10 years ago

Very WIP patch that shows pseudo elements differently in the tree.  Needs the following patches from Bug 777674 applied:

https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8392122
https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8392124
https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8407759

Things that still need to work:

* Box model highlighter when hovering
* Style Inspector (CSS Rule view, Computed Styles, Fonts, Box Model)
* Deal with styles being removed dynamically and making sure the nodes get removed from markup tree.

	Brian Grinstead [:bgrins] Assignee
	Comment 12 • 10 years ago

Have a test page for working with pseudo elements here: http://fiddle.jshell.net/bgrins/PRQ85/show/

	Brian Grinstead [:bgrins] Assignee
	Comment 13 • 10 years ago

Box model highlighter is now working

Still todo:

* Markup view: need to disable functionality things that doesn't make sense (Delete Node, edit html, etc).

* Rule view / computed styles: fixed errors when selecting node, but still need to actually fetch correct styles

* Font inspector: Fix "InvalidNodeTypeError: The supplied node is incorrect or has an incorrect ancestor for this operation.:"

* Box model tab: actually seems OK from frontend, spewing this in console though:
"ASSERTION: we should be in a pseudo-element that is expected to contain elements (:after): 'nsCSSPseudoElements::PseudoElementContainsElements(pseudo)', file fx-team/layout/style/nsComputedDOMStyle.cpp, line 675"

	Brian Grinstead [:bgrins] Assignee
	Comment 14 • 10 years ago

Adds support for rule view

	Brian Grinstead [:bgrins] Assignee
	Comment 15 • 10 years ago

adds support for Computed Styles and Font Inspector.  Computed styles properly reports styles, but still does something weird where it doesn't seem to show the source of the pseudo element rule when you expand it.  Most likely something in css-logic.js or computedview.js is filtering it out.

	Brian Grinstead [:bgrins] Assignee
	Comment 16 • 10 years ago

Adds basic support for displaying xul anonymous content and shadow dom in markup view

	Brian Grinstead [:bgrins] Assignee
	Comment 17 • 10 years ago

Rebased and carrying over r+ from pbrosset in Bug 777674 Comment 89.  New try push: https://tbpl.mozilla.org/?tree=Try&rev=0a0f5c50064a

	Brian Grinstead [:bgrins] Assignee
	Comment 18 • 10 years ago

Fixed tests for e10s: https://tbpl.mozilla.org/?tree=Try&rev=fc207b79ab86

	Carsten Book [:Tomcat]
	Comment 19 • 10 years ago

https://hg.mozilla.org/integration/fx-team/rev/94ff5ef6ef34

	Carsten Book [:Tomcat]
	Comment 20 • 10 years ago

https://hg.mozilla.org/mozilla-central/rev/94ff5ef6ef34

	Brian Grinstead [:bgrins] Assignee
	Comment 21 • 10 years ago

Will, this bug (along with Bug 777674) has added support for ::before/::after, XBL anonymous content, and shadow DOM content.  Most relevant to web authors right now is ::before and ::after inspection.  You can see it in use with the tools at a page like this: https://bgrins.github.io/devtools-demos/inspector/pseudo.html or https://adobe.github.io/css-pseudo-elements/#demos.

	Will Bamberg [:wbamberg]
	Comment 22 • 10 years ago

Thanks bgrins, I'll make sure this is covered in the docs for Firefox 35.

	Tim Nguyen :ntim
	Comment 23 • 10 years ago

Release Note Request (optional, but appreciated)
[Why is this notable]: Very demanded feature in devtools.
[Suggested wording]: Developer tools : Support for inspecting pseudo elements and shadow Dom.
[Links (documentation, blog post, etc)]: Soon to come

	Tim Nguyen :ntim
	Comment 24 • 10 years ago

(In reply to Tim Nguyen [:ntim] from comment #23)
> Release Note Request (optional, but appreciated)
> [Why is this notable]: Very demanded feature in devtools.
> [Suggested wording]: Developer tools : Support for inspecting pseudo
> elements and shadow Dom.
> [Links (documentation, blog post, etc)]: Soon to come

Small correction in the Suggested wording :
Support for inspecting ::before and ::after pseudo elements and shadow DOM.

	Sylvestre Ledru [:Sylvestre]
	Comment 25 • 10 years ago

Added to the release notes with "Support for inspecting ::before and ::after pseudo elements and shadow DOM" as wording

	Brian Grinstead [:bgrins] Assignee
	Comment 26 • 10 years ago

(In reply to Sylvestre Ledru [:sylvestre] from comment #25)
> Added to the release notes with "Support for inspecting ::before and ::after
> pseudo elements and shadow DOM" as wording

I don't think that we will want to advertise the Shadow DOM inspection yet until Bug 1053898 is finished.  Pseudo element inspection is most interesting to web authors, and XBL content inspection is interesting for people working with XUL.

	Sylvestre Ledru [:Sylvestre]
	Comment 27 • 10 years ago

OK. I disabled it. Please resubmit when ready!

	Brian Grinstead [:bgrins] Assignee
	Comment 28 • 10 years ago

(In reply to Sylvestre Ledru [:sylvestre] from comment #27)
> OK. I disabled it. Please resubmit when ready!

Thanks.  Just to make sure - the ::before/::after is still in the release notes, correct?  I'd like to make sure that we include that (and XBL inspection depending on the audience) is still included.

	Sylvestre Ledru [:Sylvestre]
	Comment 29 • 10 years ago

(In reply to Brian Grinstead [:bgrins] from comment #28)
> (In reply to Sylvestre Ledru [:sylvestre] from comment #27)
> > OK. I disabled it. Please resubmit when ready!
> 
> Thanks.  Just to make sure - the ::before/::after is still in the release
> notes, correct?  I'd like to make sure that we include that (and XBL
> inspection depending on the audience) is still included.
No, I removed the whole item.
"Support for inspecting ::before and ::after pseudo elements"  => is that OK?

	Brian Grinstead [:bgrins] Assignee
	Comment 30 • 10 years ago

(In reply to Sylvestre Ledru [:sylvestre] from comment #29)
> (In reply to Brian Grinstead [:bgrins] from comment #28)
> > (In reply to Sylvestre Ledru [:sylvestre] from comment #27)
> > > OK. I disabled it. Please resubmit when ready!
> > 
> > Thanks.  Just to make sure - the ::before/::after is still in the release
> > notes, correct?  I'd like to make sure that we include that (and XBL
> > inspection depending on the audience) is still included.
> No, I removed the whole item.
> "Support for inspecting ::before and ::after pseudo elements"  => is that OK?

Yes, that is good - thanks

	Sylvestre Ledru [:Sylvestre]
	Comment 31 • 10 years ago

OK. Back in the release notes, thanks for the confirmation!

	Will Bamberg [:wbamberg]
	Comment 32 • 10 years ago

I've added a note in the Page Inspector page, along with a really short video: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter.

	tony
	Comment 33 • 8 years ago

Is this being worked on? The link above doesn't work any more.

	Brian Grinstead [:bgrins] Assignee
	Comment 34 • 8 years ago

(In reply to tony from comment #33)
> Is this being worked on? The link above doesn't work any more.

Looks like the documentation for the feature has moved to: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#before_and_after.